<template>
<div class="page">
    <Header></Header>
    <el-menu :default-active="currentPage" unique-opened>
        <el-submenu index="1">
            <template slot="title"><span class="shujuJC"></span>数据监测</template>
            <el-menu-item-group>
                <router-link :to="menuTab.to" v-for="(menuTab,idx) in pageMenu[1]" :key="idx">
                    <el-menu-item :index="menuTab.index" @click.native="addpage(menuTab)">{{menuTab.pageName}}</el-menu-item>
                </router-link>
            </el-menu-item-group>
        </el-submenu>

        <el-submenu index="2">
            <template slot="title"><span class="zichanGL"></span>资产管理</template>
            <el-menu-item-group>
                <router-link :to="menuTab.to" v-for="(menuTab,idx) in pageMenu[2]" :key="idx">
                    <el-menu-item :index="menuTab.index" @click.native="addpage(menuTab)">{{menuTab.pageName}}</el-menu-item>
                </router-link>
            </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3">
            <template slot="title"><span class="shebeiJC"></span>设备监测</template>
            <el-menu-item-group>
                <router-link :to="menuTab.to" v-for="(menuTab,idx) in pageMenu[3]" :key="idx">
                    <el-menu-item :index="menuTab.index" @click.native="addpage(menuTab)">{{menuTab.pageName}}</el-menu-item>
                </router-link>
            </el-menu-item-group>
        </el-submenu>
        <el-submenu index="4">
            <template slot="title"><span class="yuchengKZ"></span>远程控制</template>
            <el-menu-item-group>
                <router-link :to="menuTab.to" v-for="(menuTab,idx) in pageMenu[4]" :key="idx">
                    <el-menu-item :index="menuTab.index" @click.native="addpage(menuTab)">{{menuTab.pageName}}</el-menu-item>
                </router-link>
            </el-menu-item-group>
        </el-submenu>
    </el-menu>
    <el-main class="right_content">
        <!-- 内容区小标题 -->
        <div class="zt_subTitle">
            <div></div>
            <div class="subContent">
                <div class="page_tap" v-for="(tap, index) in pageTap" :key="index">
                    <div v-if="currentPage == tap.menuIndex" class="current">
                        <i @click="delTap(tap)"></i>
                        <span @click="goPage(tap)">{{ tap.menuName }}</span>
                    </div>
                    <div v-else class="not_current">
                        <i @click="delTap(tap)"></i>
                        <span @click="goPage(tap)">{{ tap.menuName }}</span>
                    </div>
                </div>
                <div class="page_operate">
                    <div @click="moreOperate">
                        <span>更多</span>
                        <i></i>
                    </div>
                </div>

            </div>
            <div v-show="op_show" ref="more" class="more_op">

                <button @click="closeAll">关闭全部</button>
                <button @click="closeOther">关闭其他</button>

            </div>
            <div></div>
        </div>
        <router-view></router-view>
    </el-main>
</div>
</template>

<script>
export default {
    name: "index",
    data() {
        return {
            pageMenu: {
                1: [{
                    pageName: "数据监测",
                    index: "1-1",
                    to: "shujuJC"
                }],
                2: [{
                        pageName: "车辆管理",
                        index: "2-1",
                        to: "/cheliangGL"
                    },
                    {
                        pageName: "主机管理",
                        index: "2-2",
                        to: "/zhujiGL"
                    },
                    {
                        pageName: "摄像头管理",
                        index: "2-3",
                        to: "/sxtGL"
                    },
                    {
                        pageName: "SIM查看",
                        index: "2-4",
                        to: "/tongdaoCK"
                    },
                    {
                        pageName: "项目管理",
                        index: "2-5",
                        to: "/xmGL"
                    }
                ],
                3: [{
                        pageName: "设备地图",
                        index: "3-1",
                        to: "/shebeiDT"
                    },
                    {
                        pageName: "设备基站",
                        index: "3-2",
                        to: "/shebeiJZ"
                    }, {
                        pageName: "设备状态",
                        index: "3-3",
                        to: "/shebeiZT"
                    }, {
                        pageName: "摄像头状态",
                        index: "3-4",
                        to: "/sxtZT"
                    }
                ],
                4: [{
                    pageName: "远程升级",
                    index: "4-1",
                    to: "/ycSJ"
                }, {
                    pageName: "远程配置",
                    index: "4-2",
                    to: "/ycPZ"
                }],
            },

            pageTap: [{
                menuName: "设备地图",
                menuIndex: "3-1"
            }],
            currentPage: "3-1",
            op_show: false,
            openIndex: [''],
            menuList: []
        };
    },
    created() {
        let _this = this;
        _this.$router.push("/shebeiDT");
    },
    methods: {
        addpage(tab) {
            let _this = this;

            if (_this.containTab(tab.pageName) === false) {
                _this.pageTap.push({
                    menuName: tab.pageName,
                    menuIndex: tab.index
                });
                if(_this.pageTap.length > 8){
                    _this.pageTap.shift()
                }
            }

            _this.currentPage = tab.index;

        },
        goPage(tap) {
            let _this = this;
            let tapName = tap.menuName;
            switch (tapName) {
                case "设备地图":
                    _this.$router.push("/shebeiDT");
                    break;
                case "设备基站":
                    _this.$router.push("/shebeiJZ");
                    break;
                case "设备状态":
                    _this.$router.push("/shebeiZT");
                    break;
                case "数据监测":
                    _this.$router.push("/shujuJC");
                    break;
                case "摄像头状态":
                    _this.$router.push("/sxtZT");
                    break;
                case "车辆管理":
                    _this.$router.push("/cheliangGL");
                    break;
                case "主机管理":
                    _this.$router.push("/zhujiGL");
                    break;
                case "摄像头管理":
                    _this.$router.push("/sxtGL");
                    break;
                case "SIM查看":
                    _this.$router.push("/tongdaoCK");
                    break;
                case "项目管理":
                    _this.$router.push("/xmGL");
                    break;
                case "远程升级":
                    _this.$router.push("/ycSJ");
                    break;
                case "远程配置":
                    _this.$router.push("/ycPZ");
                    break;
            }
            _this.currentPage = tap.menuIndex;
        },
        delTap(tap) {
            let _this = this;
            _this.pageTap.splice(_this.containTab(tap.menuName), 1);
            let lastPage = _this.pageTap[_this.pageTap.length - 1];
            if (typeof lastPage == "undefined" || lastPage == null) {
                // 默认页面
                _this.pageTap.push({
                    menuName: "设备地图",
                    menuIndex: "3-1"
                });
                _this.$router.push("/shebeiDT");
                _this.currentPage = "3-1"
            } else {
                switch (lastPage.menuName) {
                    case "设备地图":
                        _this.$router.push("/shebeiDT");
                        break;
                    case "设备基站":
                        _this.$router.push("/shebeiJZ");
                        break;
                    case "设备状态":
                        _this.$router.push("/shebeiZT");
                        break;
                    case "数据监测":
                        _this.$router.push("/shujuJC");
                        break;
                    case "摄像头状态":
                        _this.$router.push("/sxtZT");
                        break;
                    case "车辆管理":
                        _this.$router.push("/cheliangGL");
                        break;
                    case "主机管理":
                        _this.$router.push("/zhujiGL");
                        break;
                    case "摄像头管理":
                        _this.$router.push("/sxtGL");
                        break;
                    case "SIM查看":
                        _this.$router.push("/tongdaoCK");
                        break;
                    case "项目管理":
                        _this.$router.push("/xmGL");
                        break;
                    case "远程升级":
                        _this.$router.push("/ycSJ");
                        break;
                    case "远程配置":
                        _this.$router.push("/ycPZ");
                        break;
                }
                _this.currentPage = lastPage.menuIndex;
            }

        },
        containTab(tab) {
            let _this = this;
            for (let i = 0; i < _this.pageTap.length; i++) {
                if (_this.pageTap[i].menuName == tab) {
                    return i;
                }
            }
            return false;
        },
        moreOperate() {
            let _this = this;
            if (_this.op_show == true) {
                _this.$refs.more.style.height = '0px';
                _this.op_show = false;
            } else {
                _this.$refs.more.style.height = '94px';
                _this.op_show = !_this.op_show;
            }
        },
        closeAll() {
            let _this = this;
            _this.pageTap = [{
                    menuName: "设备地图",
                    menuIndex: "3-1"
                }],
                _this.currentPage = "3-1";
            _this.$router.push("/shebeiDT");
            _this.$refs.more.style.height = '0px';
            _this.op_show = false;
        },
        closeOther() {
            let _this = this;
            for (let i = 0; i < _this.pageTap.length; i++) {
                if (_this.currentPage != _this.pageTap[i].menuIndex) {
                    _this.pageTap.splice(i--, 1);
                }
            }
            _this.$refs.more.style.height = '0px';
            _this.op_show = false;
        }
    },
};
</script>

<style scoped>
/* 内容小标题区 */
.more_op {
    height: auto;
    transition: height .5s ease-in-out;
    position: absolute;
    right: 44px;
    top: 38px;
    width: 72px;
    z-index: 1;
    background-color: #FFFFFF;
    border-radius: 4px;
    /* padding: 0 0 0 4px; */
}

.more_op>>>button {
    margin: 12px 0 0 4px;
    height: 32px;
    width: 64px;
    box-sizing: border-box;
    border-radius: 4px;
    border: none;
    color: #fff;
    z-index: 3;
    /* padding-left: 16px; */
    box-sizing: border-box;
    background: #2e70dd !important;
    cursor: pointer;
}

.page_operate>>>span {
    display: inline-block;
    height: 100%;
    width: 64px;
    position: absolute;
    box-sizing: border-box;
    border-radius: 4px;
    color: #fff;
    z-index: 3;
    padding-left: 12px;
    box-sizing: border-box;
    background: #2e70dd !important;
}

.page_operate>>>i {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url(../../static/img/more.png) no-repeat;
    background-size: 24px 24px;
    background-position: 12px;
    position: absolute;
    right: 4px;
    z-index: 5;
}

.subContent>.page_operate {
    display: inline-block;
    width: 64px;
    height: 32px;
    border-radius: 4px;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.88);
    margin-right: 8px;
    line-height: 32px;
    background: #fff;
    background-size: 8px;
    position: absolute;
    right: 0px;
    z-index: 1;
}

.page_tap>i:hover+span {
    background: #2e70dd !important;
    color: #fff;
    z-index: 3;
}

.page_tap>i:hover {
    background: url(../../static/img/close_w.png) no-repeat #2e70dd;
    border-radius: 0 4px 4px 0;
    background-size: 10px 10px;
    background-position: 12px;
}

.page_tap>.current>span {
    display: inline-block;
    height: 100%;
    width: 128px;
    position: absolute;
    box-sizing: border-box;
    border-radius: 4px 0 0 4px;
    color: #fff;
    z-index: 3;
    padding-left: 16px;
    box-sizing: border-box;
    background: #2e70dd !important;
}

.page_tap>.current>i {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url(../../static/img/close_w.png) no-repeat #2e70dd;
    border-radius: 0 4px 4px 0;
    background-size: 10px 10px;
    background-position: 12px;
    color: #fff;
    z-index: 3;
    position: absolute;
    right: 0px;
}

.page_tap>.not_current>span {
    display: inline-block;
    height: 100%;
    width: 128px;
    position: absolute;
    box-sizing: border-box;
    border-radius: 4px 0 0 4px;
    z-index: -1;
    padding-left: 16px;
    box-sizing: border-box;
}

.page_tap>.not_current>i {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url(../../static/img/close.png) no-repeat;
    background-size: 10px 10px;
    background-position: 12px;
    position: absolute;
    right: 0px;
}

.subContent>.page_tap {
    display: inline-block;
    width: 160px;
    height: 32px;
    border-radius: 4px;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: rgba(0, 0, 0, 0.88);
    margin-right: 8px;
    line-height: 32px;
    background: #fff;
    background-size: 8px;
    position: relative;
    z-index: 1;
    transition: all .5s ease-in-out;
}

.subContent>div:hover {
    cursor: pointer;
    background: #e3e7eb;
}

.subContent {
    position: absolute;
    left: 40px;
    height: 32px;
    overflow: hidden;

}

.zt_subTitle>div:nth-of-type(1) {
    width: 32px;
    height: 32px;
    display: inline-block;
    border-radius: 4px;
    background: url(/static/img/left.png) no-repeat #fff;
    background-size: 16px 16px;
    background-position: 8px;
}

.zt_subTitle>div:nth-of-type(2) {
    display: inline-block;
    width: calc(100% - 80px);
}

.zt_subTitle>div:nth-of-type(4) {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: url(/static/img/right.png) no-repeat #fff;
    background-size: 16px 16px;
    background-position: 8px;
    float: right;
}

.zt_subTitle {
    padding-top: 8px;
    box-sizing: border-box;
}

.router-link-active,
a {
    text-decoration: none;
}

.right_content {
    width: 89.6%;
    height: calc(100% - 56px);
    position: absolute;
    top: 56px;
    left: 10.4%;
    padding: 0 8px 8px 0 !important;
}

.el-submenu>>>.is-active {
    background-color: #d9e7ff !important;
    border-left: 5px solid #2e70dd !important;
    color: #3c74e3 !important;
    min-width: 10% !important;
}

.el-submenu>>>.el-submenu__title:hover {
    background-color: #ebf1fc !important;
    min-width: 10% !important;
}

.el-submenu>>>.el-menu-item {
    min-width: 10% !important;
}

.yuchengKZ {
    background: url(../../static/img/yckz.png) no-repeat;
    background-size: 16px 16px;
    padding-left: 24px !important;
    background-position-y: 3px;
}

.zichanGL {
    background: url(../../static/img/zcgl.png) no-repeat;
    background-size: 16px 16px;
    padding-left: 24px !important;
    background-position-y: 3px;
}

.shebeiJC {
    background: url(../../static/img/sbjk.png) no-repeat;
    background-size: 16px 16px;
    padding-left: 24px !important;
    background-position-y: 3px;
}

.shujuJC {
    background: url(../../static/img/sjjk.png) no-repeat;
    background-size: 16px 16px;
    padding-left: 24px !important;
    background-position-y: 3px;
}

.el-menu:hover {
    cursor: pointer;
}
.el-menu::-webkit-scrollbar{
    width: 0px !important;
}
.el-menu {
    width: 10%;
    height: calc(100% - 56px);
    background-color: #fff;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 48px;
    overflow: scroll;
}

.page {
    position: relative;
    background-color: #f5f5f5;
    height: 100vh;
}
</style>
